<template>
	<view class="content">
		<view class="content-tabs">
			<!-- '转诊状态:Pending=待处理,UnderReview=审批中,Accepted=已接受,Rejected=已拒绝,InHandle=办理中,InTreatment=诊疗中,Completed=已完成,Cancelled=已取消' -->
			<button @click="activeIndex = 0;getData('')" :class="activeIndex == 0 ? 'active' : ''">全部</button>
			<button @click="activeIndex = 1;getData('Pending')" :class="activeIndex == 1 ? 'active' : ''">待审核</button>
			<button @click="activeIndex = 2;getData('UnderReview')" :class="activeIndex == 2 ? 'active' : ''">转诊中</button>
			<button @click="activeIndex = 3;getData('Completed')" :class="activeIndex == 3 ? 'active' : ''">已完成</button>
			<button @click="activeIndex = 4;getData('Cancelled')" :class="activeIndex == 4 ? 'active' : ''">已取消</button>
			<button @click="activeIndex = 5;getData('Rejected')" :class="activeIndex == 5 ? 'active' : ''">已拒绝</button>
		</view>
		
		<view class="content-item" v-for="item in listData">
			<view class="content-item-status">
				{{item.target_dept_name || ''}} | {{item.referral_status_data_text}}
			</view>
			<view class="content-item-title">
				{{item.target_hospital_name}} <text class="content-item-tag">{{item.referral_status_data_text}}</text>
			</view>
			<view class="content-item-main">
				<p class="content-item-main-p"><text style="color:#8c8c8c;">患者信息：</text>{{item.patient_name}} {{item.patient_gender_data_text}} {{item.patient_age}}岁</p>
				<p class="content-item-main-p"><text style="color:#8c8c8c;">申请医生：</text>{{item.origin_user_name}} {{item.origin_dept_name}} {{item.origin_user_bio}}</p>
				<p class="content-item-main-p"><text style="color:#8c8c8c;">申请时间：</text>{{item.apply_time || ''}}</p>
			</view>
			<view class="content-item-main-button">
				<button class="content-item-main-button1" @click="openDialog">转诊审核</button>
				<button @click="goImpage(item)" class="content-item-main-button2">转诊交流</button>
			</view>
		</view>
		
		<tableBox :tabIndex="1"></tableBox>
		<Dialog  ref="approvalDialog" />
	</view>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import tableBox from "../../component/tableBox/tableBox.vue";
import Dialog from "../../component/Dialog/Dialog.vue";
import { genTestUserSig } from "subPackages/static/utils/GenerateTestUserSig.js";
export default {
  data() {
    return {
      listData: [],
      value: "1",
      activeIndex: 0,
      tabbarVal: "",
    };
  },
  components: {
    tableBox,
    Dialog,
  },
  onLoad() {
    this.getData();
  },
  computed: {
    ...mapState({
      allConversation: (state) => state.conversation.allConversation,
      isSdkReady: (state) => state.global.isSdkReady,
    }),
    ...mapGetters(["totalUnreadCount", "myInfo"]),
  },
  methods: {
    openDialog() {
      this.$refs.approvalDialog.showDialog();
    },
    goPage(num) {
      if (num == "add") {
        uni.navigateTo({
          url: "/pages/referralApplication/referralApplication",
        });
      } else if (num == "1") {
        uni.navigateTo({
          url: "/pages/index/index",
        });
      } else if (num == "2") {
        uni.navigateTo({
          url: "/pages/transferOut/transferOut",
        });
      } else if (num == "3") {
        uni.navigateTo({
          url: "/pages/patient/patient",
        });
      }
    },
    getData(status = "") {
      let that = this;
      let token = "";
      uni.getStorage({
        key: "userInfo",
        success: function (res) {
          console.log(res.data);
          token = JSON.parse(res.data).token;
          console.log(JSON.parse(res.data).token);
          uni.request({
              url: that.$apiUrl + "api/referral/lis",
              method: "GET",
              header: { token: token },
              data: { status: status },
            })
            .then((res) => {
              that.listData = res[1].data.data.data || [];
            });
        },
      });
    },
    click1(e) {},
    changeTabbar(e) {
      console.log(e);
    },
    godetail() {
      uni.navigateTo({
        url: "/pages/referralDetails/referralDetails",
      });
    },
    goImpage(item) {
      let that = this;
      uni.getStorage({
        key: "userInfo",
        success: function (res) {
          const userID = JSON.parse(res.data).tencent_id;
          wx.$app
            .login({
              userID: String(JSON.parse(res.data).tencent_id),
              userSig: genTestUserSig(String(JSON.parse(res.data).tencent_id))
                .userSig,
            })
            .then(() => {
              setTimeout(function () {
                that.$store.dispatch(
                  "checkoutConversation",
                  `GROUP${item.coded}`
                );
                uni.navigateTo({
                  url: "/subPackages/pages/chat/main",
                });
              }, 1000);
            });
        },
      });
    },
  },
};
</script>

<style scoped>
.content {
  min-height: 100vh;
  background: #f0f0f0;
}
.content-tabs {
  display: flex;
  padding: 32rpx 0 0 0;
  margin: 0 24rpx;
  width: calc(100% - 48rpx);
  overflow-y: auto;
}
.content-tabs > button {
  width: 120rpx;
  height: 56rpx;
  font-size: 24rpx;
  background: #fff;
  padding: 0;
}
.content-tabs > button:not(:first-child) {
  margin-left: 16rpx;
}
.active {
  background: #3c8af3 !important;
  color: #fff !important;
}
.content-item {
  margin: 24rpx;
  padding: 32rpx 24rpx;
  background: #fff;
  border-radius: 20rpx;
}
.content-item-status {
  font-size: 24rpx;
  color: #8c8c8c;
}
.content-item-title {
  font-size: 32rpx;
  margin-top: 16rpx;
}
.content-item-main {
  font-size: 26rpx;
}
.content-item-main .content-item-main-p {
  margin-top: 17rpx;
}
.content-item-main-button {
  text-align: right;
  margin-top: 48rpx;
}
.content-item-main-button1 {
  width: 168rpx;
  padding: 0;
  font-size: 26rpx;
  border-radius: 50rpx;
  background: #fff;
  border: 1rpx solid #3c8af3;
  color: #3c8af3;
  display: inline-block;
}
.content-item-main-button2 {
  width: 168rpx;
  padding: 0;
  background: #3c8af3;
  font-size: 26rpx;
  border-radius: 50rpx;
  color: #fff;
  display: inline-block;
  margin-left: 16rpx;
}
.content-item-tag {
  font-size: 24rpx;
  background: #fdf2dc;
  color: #f3ab3c;
  padding: 4rpx;
  border-radius: 5rpx;
}
</style>
